<template>
    <!-- 左侧侧边栏-->
    <div class="menu-animate" :class="{ open: visible }">
        <!-- 关闭按钮 -->
        <div class="menu-animate-close" @click="handanmateClose"></div>
        <!-- 图标栏 -->
        <div class="menu-animate-icon"></div>
        <div class="title">
            违规信息展示
        </div>
        <div class="menu-animate-content" >
            <el-scrollbar style="height:calc( 100% - 30px)" ref="boxScroll">
                <li v-for="(item,index) in menutList" :key="index" class="boxli">
                    <div>
                       <div style="width: 80px;height: 60px;"><touimgComponent :src="item.fileUrl" /></div>
                       <div style="text-align: center;"> 
                            <span>{{ typeRYLB[item.personType]}}</span><br>
                            <span>{{ item.personName }}</span>
                       </div>
                    </div>
                    <div style="text-align: left;">
                        <span>{{ item.alarmName }}</span><br>
                        <span>{{ item.alarmTime }}</span><br>
                        <span>{{ item.bidName}}</span><br>
                        <el-button v-if="item.deviceId" size="mini" @click="getWaringDetail(item)" type="primary" plain style="margin-top: 10px;background-color: #26314d;color: #fff;border: 1px solid #fff;border-radius: 4px;">视频查看</el-button>
                    </div>
                </li>
            </el-scrollbar>
          
        </div>
    

    </div>
</template>

<script>
import touimgComponent from "@/views/witness/components/Object3D/touimgComponent.vue"
const typeRYLB = {
    'ZJ': "评标专家",
    'JD': "甲方代表",
    'ZBDL': "招标代理",
}
export default {
    components:{
        touimgComponent
    },
    props: {
        visible: {
            type: Boolean,
            default: true
        },
        onButton:{
            type: Function,
        }
    },
    data() {
        return {
            typeRYLB,
            menutList:[],
            projectList: [],
            activeNames: [],
            selectedRow:null

        }
    },
    mounted(){
        this.fnsetScrollto()
    },
    methods: {
        getWaringDetail(item){
            this.onButton(item)
        },
        setWarings(data){
            console.log('data',data);
            this.menutList = data
        },
        //设置轮播
        fnsetScrollto(){
            const option ={
                top:1,
                left:0,
                behavior: 'smooth'
            }
            setInterval(() => {   
                const {scrollTop,scrollHeight, clientHeight} = this.$refs?.boxScroll?.wrap ?? {}
                if (scrollTop + clientHeight >= scrollHeight) {
                    if(!this.$refs?.boxScroll?.wrap) return
                    this.$refs?.boxScroll?.wrap.scrollTo({ top: 0, left: 0, behavior: 'smooth'})  
                    return 
                }
                this.$refs?.boxScroll?.wrap.scrollBy(option)  
            }, 1000);
        },
       
        handanmateClose() {
            this.$emit('update:visible', !this.visible)

        },
        handleCollapseChange() {

        },
        setColor() {

        },
        handleSelectItem() {

        },
        handleRowClick(val){
           this.selectedRow = val
            
        },
        getRowClass({row}){
            if (this.selectedRow === row) {
                return 'selected-row';
            }
            return '';
        }
    }
}
</script>

<style scoped lang="scss">
.menu-animate {
    position: absolute;
    top: 50%;
    right: -400px;
    z-index: 99;
    height: 900px;
    width: 400px;
    cursor: default;
    background-color: rgba(39, 24, 95, 0.3);
    // background-image:url(~@/assets/img/dp/底图@2x.png);
    // background-size: 100% 100%;
    // background-attachment: fixed;
    padding: 20px;
    padding-top: 0px;
    margin-top: -380px;
    transition: right 0.4s ease-in-out;
    box-sizing: border-box;
    &-content{
        color: #fff;
        height: 100%;
        
        .boxli{
            display: flex;
            border: 1px solid #6d68f962;
            border-radius: 6px;
            margin-bottom: 4px;
            padding: 4px;
        }
        // .el-scrollbar {
        //     // width: 517px;
        // }
        .el-scrollbar__wrap {
            height: 100% !important;
        }
        .el-scrollbar__thumb {
            height: 0 !important;
        }
    }

    /*天假过渡效果*/
    &-close {
        position: absolute;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        left: -10px;
        top: 50%;
        margin-top: -50px;
        width: 10px;
        height: 100px;
        background-color: rgba(101, 114, 238, 0.5);
    }

    &.open {
        right: 0;
    }

    .fagkuai {
        width: 12px;
        height: 12px;
        background-color: #fff;
        margin-right: 8px;
    }

    .title {
        color: #2294ee;
        display: flex;
        align-items: center;
        height: 40px;
    }

    ::v-deep .custom-table{
        //  background-color: transparent !important;
        border: 1px solid #409eff;
        background-color: #0a1238b5;

        .el-table__expanded-cell {
            background-color: transparent !important;
        }

        th,
        tr,
        td {
            background-color: transparent !important;
            padding: 4px;
        }

        .el-table__header {
            // background-color: #2f53e0;
        }

        .el-table__header th,
        .el-table__body td {
            border: 1px solid #409eff;
        }

        .el-table__row {
            border-bottom: 1px solid #409eff;
            /* 修改行之间的边框颜色 */
        }
        .selected-row {
         background-color: rgba(125, 152, 251, 0.4) !important;
       
         .cell{
            color: #409eff !important;
            }  
        }
    }


}
</style>